<template>
    <view class="container">
        <view class="head row">
            <picker
                class="date"
                mode="date"
                fields="month"
                @change="onDate"
                :value="date"
                >{{ date }}
                <view class="triangle" />
            </picker>
            <view class="">
                合计：
                <text class="red bold">¥{{ totalMoney }}</text>
            </view>
        </view>
        <view class="deducts">
            <view
                v-for="(item, index) in deductList"
                :key="index"
                class="customer"
            >
                <view class="customer-head row">
                    <view class="customer-title">{{ item.client_name }}</view>
                    <view class="red">¥{{ item.commission }}</view>
                </view>
                <view class="customer-msg grey">
                    <view class="customer-msg-row">{{ item.desc }}</view>
                    <!-- <view class="customer-msg-row"
                        >保费：{{ item.premium }}</view
                    > -->
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { dateFormat } from '@/utils/util'
import { getDeduct, DudectDto } from '@/api/deduct'
import { onReachBottom } from '@dcloudio/uni-app'

const date = ref(dateFormat('YYYY-mm', new Date()))
const deductList = ref([] as DudectDto[])
const totalMoney = ref(0)
const total = 0
let page = 1

const onDate = (event: { detail: { value: string } }) => {
    date.value = event.detail.value
    page = 1
    deductList.value = []
    getData()
}

const getData = async () => {
    const data = await getDeduct({
        page,
        month: date.value
    })
    deductList.value.push(...data.data)
    totalMoney.value = data.total_commission
}

onReachBottom(() => {
    if (total === deductList.value.length) {
        return
    }
    page += 1
    getData()
})
;(async () => {
    getData()
})()
</script>
<style lang="scss" scoped>
.container {
    @include padding(24rpx);
}
.head {
    color: #646a73;
    font-size: $uni-font-size-lg;
}
.date {
    font-size: $uni-font-size-h2;
    font-weight: bold;
    color: $uni-text-color;
}
.deducts {
    margin-top: 30rpx;
}
.customer {
    padding: 30rpx 0;
}
</style>
